import { computed, defineComponent, ref } from 'vue';
import AppendingFiles from './AppendingFiles.vue';
import BasicMultiple from './BasicMultiple.vue';
import BasicSingle from './BasicSingle.vue';
import Clearable from './Clearable.vue';
import Coloring from './Coloring.vue';
import CounterBasic from './CounterBasic.vue';
import CounterLabel from './CounterLabel.vue';
import Decorators from './Decorators.vue';
import DesignOverview from './DesignOverview.vue';
import DisableReadonly from './DisableReadonly.vue';
import NativeForm from './NativeForm.vue';
import RestrictionBasic from './RestrictionBasic.vue';
import RestrictionFilter from './RestrictionFilter.vue';
import WithChips from './WithChips.vue';
import WithProgress from './WithProgress.vue';

export default defineComponent({
  name: 'App',
  props: {},
  emits: [],

  setup(props, { attrs, emit, expose, slots }) {
    expose({});

    return () => {
      return (
        <div class='block'>
          <div class='block-'>
            <h5 class='title'>AppendingFiles</h5>
            <AppendingFiles />
          </div>
          <div class='block-'>
            <h5 class='title'>BasicMultiple</h5>
            <BasicMultiple />
          </div>
          <div class='block-'>
            <h5 class='title'>BasicSingle</h5>
            <BasicSingle />
          </div>
          <div class='block-'>
            <h5 class='title'>Clearable</h5>
            <Clearable />
          </div>
          <div class='block-'>
            <h5 class='title'>Coloring</h5>
            <Coloring />
          </div>
          <div class='block-'>
            <h5 class='title'>CounterBasic</h5>
            <CounterBasic />
          </div>
          <div class='block-'>
            <h5 class='title'>CounterLabel</h5>
            <CounterLabel />
          </div>
          <div class='block-'>
            <h5 class='title'>Decorators</h5>
            <Decorators />
          </div>
          <div class='block-'>
            <h5 class='title'>DesignOverview</h5>
            <DesignOverview />
          </div>
          <div class='block-'>
            <h5 class='title'>DisableReadonly</h5>
            <DisableReadonly />
          </div>
          <div class='block-'>
            <h5 class='title'>NativeForm</h5>
            <NativeForm />
          </div>
          <div class='block-'>
            <h5 class='title'>RestrictionBasic</h5>
            <RestrictionBasic />
          </div>
          <div class='block-'>
            <h5 class='title'>RestrictionFilter</h5>
            <RestrictionFilter />
          </div>
          <div class='block-'>
            <h5 class='title'>WithChips</h5>
            <WithChips />
          </div>
          <div class='block-'>
            <h5 class='title'>WithProgress</h5>
            <WithProgress />
          </div>
        </div>
      );
    };
  },
});
